<template>
  <div
    class="custom_carousel animate__animated animate__slideInDown"
    v-if="isShow"
    :class="isFixed ? 'fixed' : ''"
  >
    <div class="custom_carousel_close" @click="closeClickHandle">
      <van-icon name="cross" />
    </div>
    <div class="custom_carousel_content">
      <slot name="carouselcontent"></slot>
    </div>
    <div class="custom_carousel_handle">
      <slot name="carouselhandle"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "carousel",
  props: {
    item: {
      type: Object,
      default() {
        return {
          data: {
            isTipShow: {
              type: Boolean,
              default() {
                return false;
              },
            },
            isFixed: {
              type: Boolean,
              default() {
                return false;
              },
            },
          },
        };
      },
    },
  },
  data() {
    return {
      isShow: false,
      isFixed: false,
    };
  },
  created() {
    this.isShow = this.$props.item.data.isTipShow;
    this.isFixed = this.$props.item.data.isFixed;
    this.$on("close", this.closeClickHandle);
  },
  watch: {
    "$props.isTipShow"(v) {
      this.isShow = v;
    },
  },
  methods: {
    closeClickHandle() {
      this.isShow = false;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_carousel {
  display: flex;
  background-color: #333;
  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .custom_carousel_close {
    width: 10%;
    padding: (5 / @base) 0 0;
    font-size: (14 / @base);
    line-height: (40 / @base);
    background-color: #333;
    color: #999;
  }
  .custom_carousel_content {
    width: 70%;
    color: #fff;
    font-size: (14 / @base);
    text-align: left;
  }
  .custom_carousel_handle {
    width: 20%;
    color: #fff;
    font-size: (14 / @base);
  }
}
</style>
